import { useState, useEffect, useRef } from 'react'
import Header from '../../conponents/header';
import Service from '../../conponents/service';
import Footter from '../../conponents/footter';
import ApplyDialog from '../../conponents/applyDialog';
import PrivacyDialog from '../../conponents/privacyDialog';
import bg from '../../assets/bg.jpg'
import swiper1 from '../../assets/images/swiper1.png'
import swiper2 from '../../assets/images/swiper2.png'
import swiper3 from '../../assets/images/swiper3.png'
import swiper4 from '../../assets/images/swiper4.png'
import hospital from '../../assets/images/hospital.jpeg'
import od from '../../assets/images/od.png'
import join from '../../assets/images/join.jpeg'

import aa from '../../assets/images/1.png'
import tu1 from '../../assets/images/1.png'
import tu2 from '../../assets/images/2.png'
import aaa from '../../assets/images/111.jpg'

import './index.css'
import { Carousel } from 'antd'
import { useNavigate } from 'react-router-dom';
import toTop from '../../assets/images/toTop.png'
import { useTranslation } from 'react-i18next';
import classNames from 'classnames';
import { BASE_URL } from '../../utils/request';
import axios from 'axios'
import Login from '../../conponents/login';



function Home() {
  const token = localStorage.getItem('token') || ''
  const [showLogin, setShowLogin] = useState(false);
  const { t } = useTranslation()
  const navigate = useNavigate();
  const swiperData = [swiper1, swiper2, swiper3, swiper4]
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [privacyDialogOpen, setPrivacyDialogOpen] = useState(localStorage.getItem('isAgree') ? false : true);
  const elementRef = useRef(null);
  const nav = [
    {
      name: `${t('首页')}`,
      img: swiper1,
      path: '/'
    },
    {
      name: `${t('OD列表')}`,
      img: od,
      path: '/list/OD'
    },
    {
      name: `${t('SD列表')}`,
      img: swiper3,
      path: '/list/SD'
    },
    {
      name: `${t('医院列表')}`,
      img: hospital,
      path: '/list/hospital'
    },
    {
      name: `${t('申请加入')}`,
      img: join,
      path: '/application'
    },
  ]
  const [height, setHeight] = useState(0);


  const handleScroll = () => {
    const scrollTop = document.documentElement.scrollTop;
    setHeight(scrollTop)
    const fadeUpElements = document.querySelectorAll('.fade-up-element');
    fadeUpElements.forEach((element) => {
      const elementTop = element.getBoundingClientRect().top;
      const windowHeight = window.innerHeight;
      if (elementTop < windowHeight) {
        element.classList.add('animate-fade-up');
      }
    });
  };
  const handleNavigation = (e) => {
    if(!token){
      setShowLogin(true)
      return
    } 
    if (e.path === '/application') {
      setIsModalOpen(true)
      return
    }
    navigate(e.path);
  };
  const onCloseLogin = (e) => {
    setShowLogin(e)
  }
  const [banner, setBanner] = useState([])
  const [elementWidth, setElementWidth] = useState(0);
  const resizeUpdate = () => {
    console.log(111);

    // 通过事件对象获取浏览器窗口的高度
    if (elementRef.current) {
      console.log(elementRef.current.offsetWidth);
      setElementWidth(elementRef.current.offsetWidth);
    }
  };
  const onBanner = (e) => {
    if (e) {
      window.open(e);
    }
  }
  useEffect(() => {
    // 页面变化时获取浏览器窗口的大小 
    window.addEventListener('resize', resizeUpdate);
    const url1 = 'system/broadcast/list?pageNum=1&pageSize=99'
    axios({
      url: BASE_URL + url1,
      method: 'get',   // 默认值
      headers: {
        Authorization: token
      }
    }).then(ress => {
      if (ress.data.code === 200) {
        setBanner(ress.data.rows)
      }
    })

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    };
  }, []);
  return (
    <>
      <div className='bg-[rgba(114,141,107)] w-full'>
        <div style={{ backgroundImage: `url(${bg})` }} className='bg-no-repeat bg-cover pb-[100px] pt-10'>
          <Header />
          <div className="mx-auto mt-16 sm:ml-[100px] sm:mt-20">
            <div className="text-white flex-1 flex flex-col w-full max-w-3xl px-4 sm:px-0">
              <p className="text-sm font-bold mb-2 sm:text-base sm:mb-4">{t('从关爱到生命的最大乐趣——家庭建设中的伴侣')}</p>
              <h2 className="mb-4 break-word transition-all duration-300 heading-medium sm:text-2xl sm:heading-large">{t('你完成家庭的富有同情心的道路')}</h2>
              <div className="text-sm leading-relaxed sm:text-base sm:leading-[30px]">{t('在Fobb，我们庆祝十多年来在全球各地以同理心、专业知识和奉献精神建立家庭。我们尊重每一位有抱负的父母的独特故事，提供个性化的亲子之旅，无论你以前走过什么路。我们的承诺是为您提供快乐，一次一个健康的心跳。加入我们一生的冒险，为我们和美丽的灵魂而来。')}</div>
            </div>
          </div>
        </div>

        <div className="text-black px-4 py-4 sm:px-[100px] sm:py-[50px] bg-[rgba(240,252,231)]">
          <div className="text-[24px] font-bold text-center mb-4 sm:text-[36px] sm:mb-[20px]">{t('我们的服务概述')}</div>
          <div className="flex flex-wrap w-full justify-center gap-4 sm:gap-x-[20px] sm:gap-y-[50px]">
            {nav.map((i) => (
              <div onClick={() => handleNavigation(i)} className="w-full sm:w-[250px] fade-up-element cursor-pointer transition-transform transform hover:scale-110">
                <img className="w-[100%] h-[200px] sm:h-[150px] rounded-lg object-fill" src={i.img} alt="" />
                <div className="px-2 text-base font-bold text-center my-2 sm:text-[20px] sm:my-[15px]">{i.name}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="flex flex-col sm:flex-row text-white mt-8 sm:mt-[120px] px-4 sm:px-0 fade-up-element">
          <div className="w-full sm:w-[50%] flex flex-col justify-center items-center sm:items-start sm:ml-[50px] py-4 sm:py-0">
            <div className="text-[24px] font-bold mb-4 sm:text-[36px] sm:mb-[20px]">{t('我们的使命')}</div>
            <p className="text-sm leading-relaxed w-full sm:w-[90%]">
              {t('Fobb捐赠者的核心是坚定不移地致力于为有抱负的父母的生活带来欢乐。十多年来，我们的国际卵子捐赠者计划一直是连接捐赠者与未来父母的桥梁，引导他们迎接一个快乐、健康的婴儿来到这个世界的宝贵时刻。我们相信创造一个支持和友好的捐赠者体验，协调捐赠者和未来父母的愿望。完成你的家庭的旅程充满了希望、期待和温柔的时刻，同时我们引导你沿着一条无缝的道路走向梦想。')}
            </p>
          </div>
          <div className={classNames(" fade-up-element w-full sm:w-[50%]")}>
            <Carousel autoplay className='w-full'>
              {banner.map(item => {
                return (
                  <div key={item.id} onClick={() => onBanner(item.path)}>
                    <img src={item.url} className='w-full object-cover' alt="" />
                  </div>
                );
              })}
            </Carousel>
          </div>
        </div>

        <div className="flex flex-col sm:flex-row text-white mt-4 sm:mt-0 px-4 sm:px-0 fade-up-element">
          <div className="w-full sm:w-[50%] flex flex-col justify-center items-center sm:items-start sm:ml-[50px] py-4 sm:py-0">
            <div className="text-[24px] font-bold mb-4 sm:text-[36px] sm:mb-[20px]">{t('我们的使命')}</div>
            <p className="text-sm leading-relaxed w-full sm:w-[90%]">
              {t('我们的愿景超越了卵子捐赠的传统界限。我们倡导所有有意愿的父母，无论其性取向或婚姻状况如何，认识到多样性丰富了家庭生活的挂毯。每个故事都是独特的，但目的地是普遍的——一束改变生活的快乐。我们团队的灵魂在于他们专业和真诚的态度。由于我们的许多团队成员都是前捐赠者，我们与父母和捐赠者的经历产生了共鸣。这种同理心塑造了我们的服务，确保每一次互动都充满了理解和真正的关怀。')}
            </p>
          </div>
          <div className="w-full sm:w-[50%] fade-up-element">
            <img className="w-full object-cover" src={tu1} alt="" ref={elementRef} />
          </div>
        </div>

        <div className="flex flex-col sm:flex-row text-white mb-4 sm:mb-[120px] px-4 sm:px-0 fade-up-element">
          <div className="w-full sm:w-[50%] flex flex-col justify-center items-center sm:items-start sm:ml-[50px] py-4 sm:py-0">
            <div className="text-[24px] font-bold mb-4 sm:text-[32px] w-[70%] sm:text-left text-center">{t('Fobb承诺')}</div>
            <div className="w-full sm:w-[90%]">
              <p className="mb-4 leading-relaxed">
                {t('在Fobb，我们信奉一个基本信念——通过卵子捐赠受孕的每个孩子都有了解其遗传起源和历史的固有权利。以这一理念为核心，我们专注于提供主要知名的卵子捐赠者，营造透明和联系的氛围。然而，我们保持灵活性，使我们能够促进半公开的比赛，确保各方的偏好得到尊重。每一步都是精确的，并深深尊重你的愿望，确保你为人父母的旅程既充满启发又充满欢乐。')}
              </p>
              <p className="leading-relaxed">
                {t('我们欢迎您浏览我们的网站，见证与我们一起旅行的人的经历，并设想我们如何支持您独特的育儿之路。我们的团队、我们的经验和我们的激情是您通往充满孩子的笑声和爱的未来的指南针。')}
              </p>
            </div>
          </div>
          <div className="w-full sm:w-[50%] fade-up-element">
            <img className="w-full object-cover" src={tu2} alt="" />
          </div>
        </div>
        <div className="flex flex-col sm:flex-row text-white mt-4 pb-4 sm:pb-10 px-4 sm:px-0 fade-up-element">
          <div className="w-full sm:w-[50%] flex flex-col justify-center sm:items-start items-center sm:ml-[50px] py-4 sm:py-0">
            <div className="text-sm mb-4 sm:text-[16px] w-[70%] sm:text-left text-center">{t('Fobb的独特之处')}</div>
            <div className="text-[24px] font-bold mb-4 sm:text-[32px] w-[70%] sm:text-left text-center">{t('Fobb承诺')}</div>
            <div className="w-full sm:w-[90%]">
              <p className="mb-4 leading-relaxed">
                {t('在Fobb，我们采取了超越普通的一步，为家庭创建之旅带来了非凡的关怀和联系。在您的旅程中为您提供服务是我们价值观的支柱。')}
              </p>
            </div>
          </div>
          <div className="w-full sm:w-[50%] fade-up-element">
            <img className="w-full sm:w-[90%] object-cover rounded-lg" src={swiper4} alt="" />
          </div>
        </div>
      </div >
      {height > 600 && <div onClick={() => window.scrollTo({
        top: 0,
        behavior: 'smooth',
      })} className='fixed right-5 bottom-32'>
        <img className='w-[40px]' src={toTop} alt="" />
      </div>}
      <Footter />
      <Service />
      <ApplyDialog isModalOpen={isModalOpen} onEvent={(e) => setIsModalOpen(e)} />
      <PrivacyDialog isModalOpen={privacyDialogOpen} onEvent={(e) => setPrivacyDialogOpen(e)} />
      <Login show={showLogin} onEvent={onCloseLogin} />
    </>
  )
}

export default Home